<template>
	<view class="warp">
		<!-- 顶部搜索 开始 -->
		<view class="ceiling" :style="{ 'padding-top': statusBarHeight + 'px' }"></view>
		<searchHead searchTip='' goback='gobackF' title='股票开户' background='#EE515A' inputColorStyle="color:#333333" rBox="t">
		</searchHead>
		<!-- 顶部搜索 结束 -->
		<view class="content flex flex-ver flex-ac flex-f1">
			<view class="img">
				<image src="/static/imgs/account/headIng.png" style="width: 100%;" mode="widthFix"></image>
			</view>
			<view class="main flex flex-ver flex-ac flex-f1">
				<view class="cu-form-group flex">
					<input placeholder="请输入你的手机号码" name="input" v-model="phoneno" class="text-black"></input>
					<view @tap="phoneno = ''">
						<image src="/static/imgs/images/icon/clear.png" mode="widthFix" v-if="phoneno.length" style="width: 30rpx;"></image>
					</view>
				</view>
				<view class="cu-form-group flex" :class="code.length ? '':'op'">
					<input placeholder="请输入短信验证码" name="input" v-model="code" class="text-black"></input>
					<view class="list-call">
						<u-verification-code :seconds="seconds" ref="uCode" @change="codeChange"></u-verification-code>
						<u-button class="bg-blue" size="mini" @tap="getCode_v2()">{{tips}}</u-button>
					</view>
				</view>
				<view class="cu-form-group flex">
					<input placeholder="请输入你的密码" type="password" name="input" v-model="password" v-if="showPassword"></input>
					<input placeholder="请输入你的密码" name="input" v-model="password" v-else></input>
					<view @tap="showPassword = !showPassword">
						<image src="/static/images/icon/look.png" mode="widthFix" v-if="showPassword" style="width: 28rpx;"></image>
						<image src="/static/images/icon/openpwd.png" mode="widthFix" v-else style="width: 28rpx;"></image>
					</view>
				</view>
				<view class="cu-form-group flex" :class="code.length ? '':'op'">
					<input placeholder="请输入机构码" name="input" v-model="invitation" class="text-black"></input>
					<view @tap="invitation = ''">
						<image src="/static/imgs/images/icon/clear.png" mode="widthFix" v-if="invitation.length" style="width: 30rpx;"></image>
					</view>
				</view>
				<view class="login zc">
					<text @tap="bindRegister">确定</text>
				</view>
				<view class="color_E23232 "><text class="tips">开户前请准备好</text></view>
				<view class="footer flex">
					<view class="item flex flex-ver flex-ac">
						<view class="img">
							<image src="/static/imgs/account/idCard.png" mode="widthFix"></image>
						</view>
						<text class="color_999999">二代身份证</text>
					</view>
					<view class="item flex flex-ver flex-ac">
						<view class="img">
							<image src="/static/imgs/account/bank.png" mode="widthFix"></image>
						</view>
						<text class="color_999999">本人银行卡</text>
					</view>
					<view class="item flex flex-ver flex-ac">
						<view class="img">
							<image src="/static/imgs/account/wifi.png" mode="widthFix"></image>
						</view>
						<text class="color_999999">WIFI或4G环境</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import searchHead from "@/component/searchHead/searchHead.vue"
	import md5 from '@/common/md5'
	var tha, js, usercode;
	export default {
		onLoad(option) {
			usercode = option.code;
			if (usercode) {
				this.invitation = usercode;
			}
		},
		components: {
			searchHead,
		},
		data() {
			return {
				statusBarHeight: getApp().globalData.statusBarHeight, //状态栏高度			
				// 老得
				phoneno: '',
				password: '',
				code: '',
				invitation: '',
				appurl: '', //app下载地址
				/* 	xieyi:true, */
				showPassword: true,
				seconds: 60,
				tips: '获取验证码',
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode_v2() {
				if (this.phoneno == "") {
					uni.showToast({
						icon: 'none',
						title: '请先填写电话号码'
					});
					return;
				}
				if (this.$refs.uCode.canGetCode) {
					this.code = '168168'
					setTimeout(() => {
						uni.hideLoading();
						this.$refs.uCode.start();
					}, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			getCode() {
				if (this.phoneno == "") {
					uni.showToast({
						icon: 'none',
						title: '请先填写电话号码'
					});
					return;
				}
				if (this.$refs.uCode.canGetCode) {
					this.$Request.post(this.$api.index.sendMsg, {
						tel: this.phoneno
					}).then(res => {
						uni.showToast({
							icon: "none",
							title: res.msg,
							duration: 1000
						});
						if (res.code == 0) {
							setTimeout(() => {
								uni.hideLoading();
								if (res.msg == "短信发送成功") {
									this.$refs.uCode.start();
								}
							}, 2000);
			
						}
					})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			//注册
			bindRegister() {
				let _this = this
				/* 	if (this.xieyi == false) {
					    uni.showToast({
					        icon: 'none',
					        title: '请先阅读《软件用户协议》'
					    });
					    return;
					} */
				if (this.phoneno.length != 11) {
					uni.showToast({
						icon: 'none',
						title: '手机号不正确'
					});
					return;
				}
				if (this.password.length < 6) {
					uni.showToast({
						icon: 'none',
						title: '密码最少6位数'
					});
					return;
				}
				if (this.code.length != 6) {
					uni.showToast({
						icon: 'none',
						title: '验证码不正确'
					});
					return;
				}
				if (this.invitation == "") {
					uni.showToast({
						icon: 'none',
						title: '邀请码必填'
					});
					return;
				}
				var time = Date.parse(new Date());
				var token = md5(this.phoneno + this.password + time);
				this.$Request.post(this.$api.index.register, {
					phoneno: this.phoneno, //电话
					password: this.password, //密码
					invitation: this.invitation, //邀请码 
					code: this.code,
					token: token,
					time: time
				}).then(res => {
					uni.showToast({
						icon: "none",
						title: res.msg,
						duration: 1000
					});
					if (res.code == 0) {
						this.$SysCache.put("Authorization_token", token);
						this.$SysCache.put("keep_phone", _this.phoneno);
						this.$SysCache.put("keep_phone_flag", 1);
			
						// 到首页 自动属性
						uni.switchTab({
							url: '/pages/index/index',
							success() {
								var page = getCurrentPages().pop();
								if (page == undefined || page == null) return;
								page.onLoad();
							}
						})
					}
				})
			},
			// 登录去home
			toHome() {
				this.$router.push({
					path: 'pages/index/index'
				})
			},
			toLogin() {
				this.$router.push({
					path: '/pages/public/login/login'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.warp {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	.content {
		height: 100%;
	}
	.title {
		font-size: 26rpx;
		margin-top: 58rpx;
		font-weight: 400;
		margin-bottom: 40rpx;
	}
	.img {
		width: 100%;
	}
	.login {
		margin-top: 36rpx;
		background-color: #EE4343;
		width: 100%;
		border-radius: 4rpx;
		text-align: center;
		text {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 92rpx;
			color: #FFFFFF;
	
		}
	}
	.iconBox {
		margin-right: 15rpx;
		width: 44rpx;
		.icon {
			display: block;
			width: 100%;
			
		}
	}
	.border {
		background-color: #fff;
		border: 2rpx solid #EE4343;
		border-radius: 4rpx;
		text {
			color: #EE4343;
		}
	}
	.main {
		margin-top: -30rpx;
		background-color: #fff;
		padding: 0 50rpx;
		padding-top: 20rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		width: 100%;
		.cu-form-group {
			color: #333333;
			width: 100%;
			height: 124rpx;
			border-bottom: 1px solid #EFEFEF;
			padding-left: 0;
			padding-right: 0;
			uni-input {
				color: #333333;
				font-size: 32rpx;
			}
		}
	}
	.tips {
		display: block;
		margin-top: 140rpx;
		margin-bottom: 80rpx;
		position: relative;
		&::after {
			position: absolute;
			content: '';
			width: 56rpx;
			height: 2rpx;
			background: #E4000D;
			top: 0;bottom: 0;
			left: -72rpx;
			margin: auto;
		}
		&::before {
			position: absolute;
			content: '';
			width: 56rpx;
			height: 2rpx;
			background: #E4000D;
			top: 0;bottom: 0;
			right: -72rpx;
			margin: auto;
		}
	}
	.footer {
		width: 100%;
		justify-content: space-between !important;
		.img {
			width: 55rpx;
			margin-bottom: 15rpx;
		}
	}
	.op {
		opacity: 0.5;
	}
	
</style>

